import React from 'react'
import net from '../../api'
import { useNavigate } from 'react-router-dom'
import {
    Form,
    Input,
    Button,
    message,
    Card,
} from 'antd';



export default function Register(props) {
    const navigate = useNavigate()

    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 14 },
        },
    };


    const onFinish = async (values) => {
        const formData = {
            account: values?.account,
            password: values?.password,
            phone: values?.phone,
            email: values?.email,
        };

        try {
            const res = await net.post('/api/user/registered', formData);
            if (res?.data?.code === 200) {
                message.success(res?.data?.msg)
                return navigate('/Login')
            }
            message.error(res?.data?.msg);
        } catch (err) {
            console.log('===err', err);
        }

    };

    return (
        <div
            style={{
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100vh',
            }}
        >
            <Card
                style={{
                    width: '60%',
                    textAlign: 'center',
                    maxWidth: 1200,
                }}
                title='注册界面'
            >
                <Form
                    {...formItemLayout}
                    variant="filled"
                    onFinish={onFinish}
                    style={{ minWidth: 600 }}
                >
                    <Form.Item
                        label="账号"
                        name="account"
                        rules={[{ required: true, message: '请输入账号' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[{ required: true, message: '请输入手机号' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="邮箱"
                        name="email"
                        rules={[{ required: true, message: '请输入邮箱' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 6, span: 12 }}>
                        <Button type="" onClick={() => navigate('/Login')} style={{ margin: '0px 10px' }}>
                            返回
                        </Button>
                        <Button type="primary" htmlType="submit" style={{ margin: '0px 10px' }}>
                            注册
                        </Button>
                    </Form.Item>
                </Form>
            </Card>
        </div>

    )
}